<template>
  <el-container style="height: 750px;border: 1px solid #eee">
    <el-aside width="200px">
      <el-menu
          router
          default-active="2"
          class="el-menu-vertical-demo"
          :default-active="this.$router.path"
          @open="handleOpen"
          @close="handleClose">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>疫苗预约</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/appointment" :class="$route.path==='/appointment'?'is-active':''">预约信息</el-menu-item>
                <el-menu-item index="/vaccineManager" :class="$route.path==='/vaccineManager'?'is-active':''">疫苗管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/appointmentMsg" :class="$route.path==='/appointmentMsg'?'is-active':''">
              <i class="el-icon-document"></i>
              <span slot="title">预约列表</span>
            </el-menu-item>
            <el-menu-item index="/manager" :class="$route.path==='/manager'?'is-active':''">
              <i class="el-icon-setting"></i>
              <span slot="title">账户管理</span>
            </el-menu-item>
          </el-menu>
    </el-aside>

    <el-container>
      <el-header class="el-header home_header">
        <div class="home_title">疫苗预约系统</div>
        <div class="home_userinfoContainer">
          <el-dropdown>
          <span class="el-dropdown-link home_userinfo">
            {{admin.sname}}<i class="el-icon-arrow-down el-icon--right home_userinfo"></i>
          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <el-breadcrumb separator-class="el-icon-arrow-right" separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
        </el-breadcrumb>

        <router-view/>

      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "AdminManager",
  data() {
    return{
      admin:''
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      let _this = this;
      this.$confirm('注销登陆吗?', '提示', {
        confirmButtonText: "确定",
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        localStorage.removeItem('systemAdmin')
        _this.$router.replace({path: '/'})
      })
    },
  },
  created() {
    let admin=JSON.parse(window.localStorage.getItem('adminManager'));
    console.log(admin)
    this.admin=admin
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.home_title{
  font-size: 22px;
  display: inline;
}
.home_userinfoContainer{
  display: inline;
  margin-right: 20px;
}

.home_header{
  background-color: #bae208;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
